<template>
  <button @click="num++">{{ num }}</button>
</template>

<script setup>
import { ref, onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'

const num = ref(0)

console.log('setup 内部直接书写代码, 类似于 以前生命周期的 创建前后');

onBeforeMount(()=>{
  console.log("1. 组件开始挂载");
})
onMounted(() => {
    console.log("2. 组件挂载完毕");
});
onBeforeUpdate(() => {
    console.log('3. 数据更新前')
})
onUpdated(() => {
    console.log('4. 数据更新完毕')
})
onBeforeUnmount(() => {
    console.log('5. 组件准备开始卸载')
})
onUnmounted(() => {
    console.log('6. 组件卸载完毕')
})
</script>